//显示图片和隐藏图片
function showimg() {
    let imge = document.querySelector('.imge')
    let main = document.querySelector('main')
    window.addEventListener('load', function () {
        if (window.innerWidth < 800) {
            imge.style.display = 'none'
            main.style.float = 'left'
        } else {
            imge.style.display = 'block'
            main.style.float = 'right'
        }
        window.addEventListener('resize', function () {
            if (window.innerWidth < 800) {
                imge.style.display = 'none'
                main.style.float = 'left'
            } else {
                imge.style.display = 'block'
                main.style.float = 'right'
            }
        })

    })

}

showimg()
//选项卡
function tabel() {
    $('.from>div>span').on('click', function () {
        $(this).siblings().removeClass('active')
        $(this).addClass('active')
    })
}
tabel()
//渲染表单
function showfrom() {
    let strdl = `
        <input type="text" name="user1" placeholder="邮箱/手机号/ID">
        <p>请输入账户</p>
        <input type="password" name="password1" name="" id="" placeholder="密码">
        <p>请输入密码</p>
        <label> <input type="checkbox" class="check1" name="" id="">
            <span class="red">已阅读并同意小米帐号<a href="">用户协议</a> 和 <a href="">隐私政策</a> </span></label> <br>
        <button type="submit" name="dl">登录</button>
        <div>
            <a href="">忘记密码？</a>
            <a href="">手机号登录</a>
        </div>
   `
    let strzc = `
        <input type="text" name="user" placeholder="注册邮箱/手机号/ID">
        <p>请输入账户</p>
        <input type="password" name="password" id="" placeholder="注册密码">
        <p>请输入密码</p>
        <label> <input type="checkbox" class="check2" name="" id="">
            <span class="red">已阅读并同意小米帐号<a href="">用户协议</a> 和 <a href="">隐私政策</a> </span></label> <br>
        <button type="submit" name="dl1">注册</button>
        <div>
            <a href="">重新注册</a>
            <a href="">手机号登录</a>
        </div>
   `
    $('.from>form').html(strdl)
    dnelu()
    $('.from>div').on('click', 'span', function (e) {
        e = e || window.event
        if (e.target.innerHTML == '登录') {
            console.log('登录')
            $('.from>form').html(strdl)
            dnelu()

        }
        if (e.target.innerHTML == '注册') {
            console.log('注册')
            $('.from>form').html(strzc)
            zhuce()
        }

    })
}
showfrom()


function dnelu() {
    let user = document.querySelector('input[name="user1"]')
    let paswd = document.querySelector('input[name="password1"]')
    let forms = document.querySelector('form')
    let check = document.querySelector('input[class="check1"]')
    //提交函数
    async function tijiao() {
        let u = user.value
        let p = paswd.value
        let dluser = await myPromise({
            url: 'http://api.yuguoxy.com/api/member/login',
            method: 'post',
            data: {
                username: u,
                password: p,
            }
        })
        console.log(dluser)
        if (dluser.resultCode == 1) {
            location.href = "index.html"
        }
        if (dluser.resultCode == -1) {
            alert('账户或密码错误')


        }
    }

    forms.addEventListener('submit', function (e) {
        e.preventDefault()
    })
    forms.addEventListener('click', function (e) {
        if (e.target.getAttribute('name') == 'dl') {
            if (check.checked) {
                tijiao()
            } else {
                alert('勾选')
            }
        }
    })
}
//注册
function zhuce() {
    let user2 = document.querySelector('input[name="user"]')
    let paswd2 = document.querySelector('input[name="password"]')
    let forms2 = document.querySelector('form')
    let check2 = document.querySelector('input[class="check2"]')
    //验证用户名非空函数
    function isname1() {
        let ps = document.querySelectorAll('p')
        if (user2.value == '') {
            ps[0].style.opacity = '1'
            return false
        } else {
            ps[0].style.opacity = '0'
            return true
        }
    }
    //验证密码非空函数
    function ispwd1() {
        let ps = document.querySelectorAll('p')
        if (paswd2.value == '') {
            ps[1].style.opacity = '1'
            return false
        } else {
            ps[1].style.opacity = '0'
            let reg = /^[A-Z][0-9a-zA-Z]{7,}/
            console.log(reg.test(paswd2.value));
            if (reg.test(paswd2.value)) {
                // ps[5].style.opacity='0'
                return true
            } else {
                alert('密码格式不对，要开头字母大写至少...')
                return false
            }
        }
    }
    //提交函数
    async function tijiao1() {
        if (isname1() == true && ispwd1() == true) {
            let u = user2.value
            let p = paswd2.value
            let zcuser = await myPromise({
                url: 'http://api.yuguoxy.com/api/member/add',
                method: 'post',
                data: {
                    username: u,
                    password: p,
                }

            })
            console.log(zcuser)
            if (zcuser.resultCode == 1) {
                alert('注册成功')
            }

        } else {
            alert('注册失败')
        }

    }
    user2.addEventListener('blur', function () {
        isname1()
    })
    paswd2.addEventListener('blur', function () {
        ispwd1()
    })
    forms2.addEventListener('submit', function (e) {
        e.preventDefault()
    })
    forms2.addEventListener('click', async function (e) {
        if (e.target.getAttribute('name') == 'dl1') {
            if (check2.checked) {
                tijiao1()
            } else {
                alert('勾选')
            }
        }
    })
}